import React, { Component } from "react";
import { Input, Button, Icon } from "antd";
import { connect } from "dva";
import styles from "./DataHub.less";

@connect(stores => ({
  apidata: stores.adddataSource
}))
class DataHub extends Component {
  state = {
    endpoint: "",
    projectName: "",
    keyId: "",
    subId: "",
    accessKey: "",
    topicName: "",
    AllControl: false,
    through: false
  };

  componentDidMount() {
    setTimeout(() => {
      const { dataDetail = {}, operate = "add" } = this.props;
      if (operate === "mod" && dataDetail && dataDetail.dsType === 3) {
        this.setState(
          {
            endpoint: dataDetail.datahubEndpoint,
            projectName: dataDetail.datahubProjectName,
            keyId: dataDetail.datahubAccessKeyId,
            subId: dataDetail.datahubSubId,
            accessKey: dataDetail.datahubAccessKeySecret,
            topicName: dataDetail.datahubTopicName
          },
          () => {
            this.getUnsaved();
          }
        );
      }
    }, 700);
  }

  epChange = e => {
    this.setState(
      {
        endpoint: e.target.value,
        through: false,
        AllControl: false
      },
      () => {
        this.getUnsaved();
      }
    );
  };

  proChange = e => {
    this.setState(
      {
        projectName: e.target.value,
        through: false,
        AllControl: false
      },
      () => {
        this.getUnsaved();
      }
    );
  };

  meChange = e => {
    this.setState(
      {
        keyId: e.target.value,
        through: false,
        AllControl: false
      },
      () => {
        this.getUnsaved();
      }
    );
  };

  subIdChange = e => {
    this.setState(
      {
        subId: e.target.value,
        through: false,
        AllControl: false
      },
      () => {
        this.getUnsaved();
      }
    );
  };

  accChange = e => {
    this.setState(
      {
        accessKey: e.target.value,
        through: false,
        AllControl: false
      },
      () => {
        this.getUnsaved();
      }
    );
  };

  topicChange = e => {
    this.setState(
      {
        topicName: e.target.value,
        through: false,
        AllControl: false
      },
      () => {
        this.getUnsaved();
      }
    );
  };

  getUnsaved = () => {
    const { getValue } = this.props;
    const {
      projectName,
      endpoint,
      keyId,
      subId,
      accessKey,
      topicName
    } = this.state;
    const temp = [
      { projectName, endpoint, keyId, subId, accessKey, topicName }
    ];
    getValue(temp, this.state.AllControl, this.state.through);
  };

  test = () => {
    const {
      endpoint,
      projectName,
      keyId,
      subId,
      accessKey,
      topicName
    } = this.state;
    const { dispatch } = this.props;
    if (
      endpoint !== "" &&
      projectName !== "" &&
      keyId !== "" &&
      subId !== "" &&
      accessKey !== "" &&
      topicName !== ""
    ) {
      dispatch({
        type: "adddataSource/testConnect",
        payload: {
          dsType: 3,
          datahubEndpoint: endpoint,
          datahubAccessKeyId: keyId,
          datahubProjectName: projectName,
          datahubTopicName: topicName,
          datahubSubId: subId,
          datahubAccessKeySecret: accessKey
        }
      }).then(() => {
        const { apidata } = this.props;
        const { testErr = false } = apidata;
        if (testErr) {
          this.setState(
            {
              AllControl: true,
              through: true
            },
            () => {
              const { getValue } = this.props;
              const temp = [
                { projectName, endpoint, keyId, subId, accessKey, topicName }
              ];
              getValue(temp, this.state.AllControl, this.state.through);
            }
          );
        } else {
          this.setState(
            {
              AllControl: true,
              through: false
            },
            () => {
              const { getValue } = this.props;
              const temp = [
                { projectName, endpoint, keyId, subId, accessKey, topicName }
              ];
              getValue(temp, this.state.AllControl, this.state.through);
            }
          );
        }
      });
    }
  };

  renderSuffix = () =>
    this.state.through ? (
      <Icon type="check-circle" style={{ color: "#52C41A" }} />
    ) : (
      <Icon type="close-circle" style={{ color: "#e23c39" }} />
    );

  render() {
    const {
      through,
      AllControl,
      endpoint,
      accessKey,
      keyId,
      subId,
      topicName,
      projectName
    } = this.state;
    const { param, editable } = this.props;
    return (
      <div className={styles.root}>
        <div className={styles.title}>数据配置</div>
        <div className={styles.info}>
          <div className={styles.choice1}>
            <span className={styles.star}>*</span>endpoint：
            <div style={{ display: "flex", flexDirection: "column" }}>
              <Input
                // style={{ width: 466 }}
                placeholder="请输入endpoint："
                onChange={this.epChange}
                className={styles.notEmpty}
                suffix={AllControl ? this.renderSuffix() : null}
                value={endpoint}
                disabled={!editable}
                // maxLength={25}
              />
            </div>
          </div>
          <div className={styles.choice5}>
            <span className={styles.star}>*</span>key_secre：
            <Input
              className={styles.notEmpty}
              placeholder="请输入key_secre"
              onChange={this.accChange}
              suffix={AllControl ? this.renderSuffix() : null}
              value={accessKey}
              disabled={!editable}
              // maxLength={25}
            />
          </div>
          <div className={styles.choice3}>
            <span className={styles.star}>*</span>key_id：
            <Input
              className={styles.notEmpty}
              placeholder="请输入key_id"
              onChange={this.meChange}
              suffix={AllControl ? this.renderSuffix() : null}
              value={keyId}
              disabled={!editable}
              // maxLength={25}
            />
          </div>
          <div className={styles.choice2}>
            <span className={styles.star}>*</span>project_name：
            <Input
              className={styles.notEmpty}
              placeholder="请输入project_name"
              onChange={this.proChange}
              suffix={AllControl ? this.renderSuffix() : null}
              value={projectName}
              disabled={!editable}
              // maxLength={25}
            />
          </div>
          <div className={styles.choice7}>
            <span className={styles.star}>*</span>topic_name：
            <Input
              className={styles.notEmpty}
              placeholder="请输入topic_name"
              onChange={this.topicChange}
              suffix={AllControl ? this.renderSuffix() : null}
              value={topicName}
              disabled={!editable}
              // maxLength={25}
            />
          </div>
          <div className={styles.choice4}>
            <span className={styles.star}>*</span>subId：
            <Input
              className={styles.notEmpty}
              placeholder="请输入subId"
              onChange={this.subIdChange}
              suffix={AllControl ? this.renderSuffix() : null}
              value={subId}
              disabled={!editable}
              // maxLength={25}
            />
          </div>
          <div
            style={{
              width: 466,
              marginLeft: 90,
              marginTop: 8,
              marginBottom: 24
            }}
          >
            <Button
              type="primary"
              onClick={this.test}
              style={{
                backgroundColor: through ? "#52C41A" : ""
              }}
              disabled={
                param[0] === "" ||
                param[1] === "" ||
                endpoint === "" ||
                accessKey === "" ||
                keyId === "" ||
                subId === "" ||
                topicName === "" ||
                projectName === ""
              }
            >
              {through ? "测试通过" : "连通测试"}
            </Button>
          </div>
        </div>
      </div>
    );
  }
}

export default DataHub;
